---
import DocsLayout from '@/layouts/Docs.astro'
import type { MDXLayoutProps } from 'astro'
import { ArrowUpRight } from 'lucide-react'
import { FRAMEWORKS, getFramework } from '@/lib/framework'

type Props = MDXLayoutProps<{}>

const { sandbox, pkgName } = FRAMEWORKS[getFramework(Astro.params)!]
---

<DocsLayout title={`${pkgName} Examples`} description={`Official ${pkgName} templates to get you started.`}>
	<header slot="hero" class="~mb-12/24 ~mt-4/6 container max-w-2xl text-center">
		<h1 class="~text-3xl/5xl font-semibold tracking-tight">Examples</h1>
		<div class="~text-base/lg ~mt-4/6 prose prose-muted dark:prose-invert text-pretty">
			<p>Official templates to get you started.</p>
		</div>
		<div class="~mt-6/8 flex w-full flex-wrap items-stretch justify-center gap-3">
			<a href={sandbox} target="_blank" class="btn btn-primary">
				Open sandbox
				<ArrowUpRight className="size-4" />
			</a>
			<a
				href="https://github.com/barvian/number-flow/discussions/new?category=example-request"
				target="_blank"
				class="btn btn-secondary"
			>
				Request an example
				<ArrowUpRight className="size-4" />
			</a>
		</div>
	</header>
	<slot />
</DocsLayout>
